<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--头部固定引用-->
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <!--固定引用结束,自定义引用添加在下面-->
    <title>业务介绍</title>
    <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
    <style>
        .placeholder-head {

            z-index: 1;
        }

        .calculator-index-wrap {

            z-index: 0;
        }

        .calculator-index-img {
            width: 7.5rem;
            height: 3rem;
            background: linear-gradient(134deg, rgba(87, 161, 255, 1) 0%, rgba(44, 104, 255, 1) 100%);
        }

        .calculator-index-img img {
            width: 2.48rem;
            height: 2.48rem;
            right: .38rem;
            bottom: 0;
        }

        .calculator-index-title {
            left: 0.32rem;
            bottom: 0.68rem;
            color: rgba(255, 255, 255, 1);
        }

        .calculator-index-search {
            bottom: -0.42rem;
            left: 0.32rem;
            height: .84rem;
            width: 6.86rem;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0 0 .32rem 0 rgba(0, 0, 0, 0.1);
            border-radius: .04rem;
        }

        .calculator-index-search span {
            color: rgba(159, 159, 159, 1);
            margin-left: .24rem;
        }

        .calculator-index-search i {
            margin-right: .26rem;
        }

        .calculator-index-search span {
            margin-left: .24rem;
        }
        .calculator-index-input {
            color: rgba(34, 34, 34, 0.38);
        }

        .search-history-wrap {
            background: rgba(255, 255, 255, 1);
            /*padding: 0 .32rem;*/
            margin-top: .82rem;
        }

        .search-history-head {
            margin-bottom: .14rem;
            padding: 0 .32rem;
        }

        .search-history-head div {
            height: .4rem;
            line-height: .4rem;
            color: rgba(34, 34, 34, 1);
        }

        .search-history-head span {
            color: rgba(34, 34, 34, 0.38);
        }

        .search-history-item {
            flex-wrap: wrap;
            display: flex;
            overflow: hidden;
            padding: 0 .18rem;
        }

        .search-history-word {
            line-height: .44rem;
            background: rgba(247, 247, 247, 1);
            border-radius: .04rem;
            color: rgba(34, 34, 34, 1);
            margin: .1rem .14rem;
            padding: .1rem .2rem;
            max-width: 6.1rem;
        }


        .search-hot-wrap {
            background: rgba(255, 255, 255, 1);
            margin-top: .4rem;
        }
        .search-hot-head {
            margin-bottom: .14rem;
            padding: 0 .32rem;
        }
        .search-hot-item {
            flex-wrap: wrap;
            display: flex;
            overflow: hidden;
            padding: 0 .18rem;
        }
        .search-hot-title {
            height: .4rem;
            line-height: .4rem;
            color: rgba(34, 34, 34, 1);
        }
        .search-hot-icon {
            margin-left: .12rem;
            color: #EC3E33;
        }
    </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div class="flex-column bg-white h-100-p">


    <!--状态栏-->
    <div class="placeholder-top pos-f placeholder-head">
        <!--状态栏-->
        <div class="status-bar pos-f"></div>
        <!--标题栏-->
        <div class="nav-bar pos-f flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16 c-white"></span>
            </div>
            <div class="center-bar fs16 ff500 line1"></div>
            <div class="right-bar">
            </div>
        </div>
    </div>

    <div class="calculator-index-wrap pos-r">
        <div class="calculator-index-img">
            <img class="pos-a" src="../../images/data/jsq@3x.png">
        </div>
        <div class="calculator-index-title ff500 fs20 pos-a">ABS计算器</div>
        <div class="flex-row justify-content-between align-items-center calculator-index-search pos-a" onclick="goSearch()">
            <div class="flex-row align-items-center">
                <span class="iconfont iconsousuo-01 fs16"></span>
                <div class="flex-row align-items-center calculator-index-input ml10 fs14">搜索债券代码/简称</div>
            </div>
        </div>
    </div>


    <div class="flex-column flex-1 scroll-y pt20">

        <div class="search-history-wrap dis-n">
            <div class="flex-row justify-content-between align-items-center search-history-head">
                <div class="ff500 fs14">搜索历史</div>
                <span class="iconfont iconlajitong_icon fs16" onclick="cacheClean()"></span>
            </div>
            <div class="search-history-item"></div>
        </div>

        <div class="search-hot-wrap">
            <div class="flex-row align-items-center search-hot-head">
                <div class="ff500 fs14 search-hot-title">热门搜索</div>
                <span class="search-hot-icon iconfont iconremen fs16"></span>
            </div>
            <div class="search-hot-item"></div>
        </div>
    </div>

</div>
</body>
<!--下面四个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--固定引用结束-->
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>

  let pm = {
    isClick: false
  }

  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()

    reLoadPage()
  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {
    reLoadPage()
  }

  function reLoadPage(){
    pm.isClick = false
    dealSearchWord()
    getSearchWord()
  }

  function dealSearchWord() {
    jsBridge.getData('absSearchData').then(list => {
      if (list) {
        $('.search-history-wrap').show()

        let htmlStr = ''
        $.each(list, function (i, item) {
          htmlStr += '<div class="search-history-word ff400 fs13 line1" onclick="goCalculator(\'' + item.id + '\', \'' + item.code + '\')">' + item.name + '</div>'
        })
        $('.search-history-item').html(htmlStr)
      }
    })
  }

  //清除缓存
  function cacheClean() {
    $('.search-history-item').html('')
    jsBridge.delData('absSearchData')
    $('.search-history-wrap').hide()
  }

  function goSearch() {
    jsBridge.openWindow('html/data/calculator-search.html', {}, {noBar: false})
  }

  function goCalculator(id, code) {
    let data = {
      'commons': {},
      'datas': {
        'securityId': id,
        'securityCode': code
      }
    }

    if (!pm.isClick) {
      pm.isClick = true
      Server.calculatorIndex.checkAbsCalc(data).then(function (res) {
        pm.isClick = false
        if (res.data) {
          jsBridge.openWindow('html/data/abs-calculator.html?id=' + id, {}, {noBar: false})
        } else {
          //跳转到无数据页面
          jsBridge.openWindow('html/data/calculator-search.html?flag=true', {}, {noBar: false})
        }
      })
    }
  }

  //获取搜索热词
  function getSearchWord() {
    //Server.indexSearch.getHotWord({
    //}).then(function (data) {
    let list = [
      {'name':'京东21A1','code':'138110.SZ','id':'2565556'},
      {'name':'璀璨15A','code':'168842.SH','id':'3236909'},
      {'name':'17居融1A','code':'1789229.IB','id':'235854'}]
    if (list) {
      let htmlStr = ''
      $.each(list, function (i, item) {
        if (i < 20) {
          htmlStr += '<div class="search-history-word ff400 fs13 line1" onclick="goCalculator(\'' + item.id + '\', \'' + item.code + '\')">' + item.name  + '</div>'
        }
      })

      $('.search-hot-item').html(htmlStr)
    }
    //})
  }


</script>
</html>
